<!DOCTYPE html>
<script src="../../../resources/check-layout.js"></script>
<p>There should be a navajowhite square below, and a horizontal scrollbar. No red should be seen.</p>
<div id="outerFlex" style="display:flex;">
    <div>
        <div style="-webkit-columns:3; -webkit-column-gap:10px; width:320px;">
            <div style="display:flex; height:150px;">
                <!-- Scrollable flex item. Its height will be stretched or (in this case) shrunk to
                     fill the containing flex container. -->
                <div style="overflow-x:auto; overflow-y:hidden; flex:1;">
                    <!-- Invalid column spanner, since the nearest block formatting context isn't
                         the one established by the multicol container. -->
                    <div data-expected-width="100" style="-webkit-column-span:all; height:100px; background:navajowhite;"></div>

                    <!-- Add something that causes a scrollbar. Leave 50px blank for the scrollbar. -->
                    <div style="width:200%; margin-top:50px; height:150px; background:red;"></div>
                </div>
            </div>
            <!-- We want the previous flexbox to live in only one column, so add some spacing to
                 make the multicol container tall enough for that. -->
            <div style="height:300px;"></div>
        </div>
    </div>
</div>
<script>
    checkLayout("#outerFlex");
</script>
